<template>
	<view class="success-box">
		<!-- 积分弹框 -->
		<view class="score-modal" v-if="showScoreModal">
			<view class="score-modal-content">
				<!-- <view class="score-modal-close" @click="closeScoreModal">×</view> -->
				<view class="score-modal-title">积分赠送</view>
				<image class="score-img" src="https://pic.hedashepin.com/upload/3/20250529/8d22091433a1a15dd87f999be651fb6b.png" mode=""></image>
				<view class="score-modal-text">
					恭喜您获得 <text class="score-num-text" :style="{color:t('color2')}">{{ givescore2 }}</text> 积分
					<!-- <text v-if="givescore2">(确认收货后将再获得 {{ givescore2 }} 积分)</text> -->
				</view>
				<view class="score-modal-btn" @click="goHome" :style="{background:t('color1')}">马上使用</view>
				
			</view>
			<image @click="closeScoreModal" class="close-img" src="https://pic.hedashepin.com/upload/3/20250529/cd84c271430cc30c332ce59bad53474c.png" mode=""></image>
		</view>
		<view class="success-card">
			<view class="success-card-title">
				<image class="success-img"
					src="https://pic.hedashepin.com/upload/3/20250528/98de67a93f557ab21ead9a49a9fdf996.png" mode="">
				</image>
				<view class="success-money">
					<view class="">
						支付成功
					</view>
					<view class="success-sf">
						<text>实付:</text>
						<text class="success-sf-text" :style="{color:t('color2')}">￥{{opt.money}}</text>
					</view>
				</view>
			</view>
			<view class="success-main">

				<image class="dui-gou"
					src="https://pic.hedashepin.com/upload/3/20250528/25874dbba1a6ad0cfdd30cc3b9d48fa4.png" mode="">
				</image>

				<view class="success-main-text">
					感谢您选择{{initdata.name}}，我们会将货品尽快送到您手中!
				</view>
			</view>
			<view class="success-btn">
				<view class="success-btn-box" @click="toOrder" :style="{
      color: t('color1'),
      border: `1px solid ${t('color1')}`
    }">
					查看订单
				</view>
				<view class="success-btn-box" @click="toShare"
					:style="{background:t('color1'), border: `1px solid ${t('color1')}`,color:'#fff'}">
					分享订单
				</view>
			</view>
		</view>
		<view class="waterfall-container" v-if="likelist.length > 0">
			<view class="like">
				<image class="like-icon"
					src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250407/1086317011f641d4dd9fc9a67b24ca9e.png"
					mode=""></image>
				<text>你可能还喜欢</text>
			</view>
			<view class="waterfall-list">
				<!-- 左侧列 -->
				<view class="waterfall-column">
					<view class="waterfall-item" v-for="(item, index) in leftColumnList" :key="'left-' + index"
						:data-url="'/pages/shop/product?id=' + item.id" @click.stop="goto">
						<image class="shop-image" :src="item.pic" mode="widthFix"></image>
						<view class="shop-text">
							<view class="shop-text-left">
								<view class="shop-text-name">{{ item.name }}</view>
								<view class="shop-text-price">
									<view>￥{{ item.sell_price }}</view>
									<view class="shop-text-sales">销量:{{ item.sales }}</view>
								</view>
							</view>
							<!-- <view >
								<image class="shop-add"
									src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250402/09cf0a1a6c7c2efd061d325e7722f543.png"
									mode=""></image>
							</view> -->
						</view>
					</view>
				</view>

				<!-- 右侧列 -->
				<view class="waterfall-column">
					<view class="waterfall-item" v-for="(item, index) in rightColumnList" :key="'right-' + index"
						:data-url="'/pages/shop/product?id=' + item.id" @click="goto">
						<image class="shop-image" :src="item.pic" mode="widthFix"></image>
						<view class="shop-text">
							<view class="shop-text-left">
								<view class="shop-text-name">{{ item.name }}</view>
								<view class="shop-text-price">
									<view>￥{{ item.sell_price }}</view>
									<view class="shop-text-sales">销量:{{ item.sales }}</view>
								</view>
							</view>
							<!-- <view>
								<image class="shop-add"
									src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250402/09cf0a1a6c7c2efd061d325e7722f543.png"
									mode=""></image>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 加载更多提示 -->
			<view v-if="isLoading" class="loading-text">加载中...</view>
			<view v-if="!hasMore" class="no-more-text">没有更多了~</view>
			<view class="load-more-trigger" style="height: 1px"></view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				likelist: [],
				page: 1,
				pageSize: 10,
				hasMore: true,
				isLoading: false,
				leftColumnList: [],
				rightColumnList: [],
				opt: {},
				showScoreModal: false, // 控制积分弹框显示
				givescore: 0, // 付款后赠送积分
				givescore2: 0, // 确认收货后赠送积分
				initdata:app.globalData.initdata
			}
		},
		onLoad(opt) {
			this.opt = app.getopts(opt);
			// 从opt中获取积分参数
			this.givescore = parseInt(this.opt.givescore) || 0;
			this.givescore2 = parseInt(this.opt.givescore2) || 0;

			// 如果有任意一个积分大于0，则显示弹框
			if ( this.givescore2 > 0) {
				setTimeout(()=>{
					this.showScoreModal = true;
				},1000)
				
			}
			this.gettjlist();
		},
		methods: {
			gettjlist() {
				if (!this.hasMore || this.isLoading) return;
				this.isLoading = true;
				const that = this;

				app.get(
					"Shop/guessLikeProduct", {
						page: this.page,
						pagelimit: this.pageSize,
					},
					function(res) {
						that.isLoading = false;

						if (res.status == 200) {
							const newData = res.data;
							if (that.page === 1) {
								that.likelist = newData;
							} else {
								that.likelist = [...that.likelist, ...newData];
							}

							// 拆分数据到左右两列（模拟瀑布流）
							that.splitDataToColumns();

							that.hasMore = newData.length >= that.pageSize;
							that.page++;
						} else {
							app.error(res.msg);
						}
					}
				);
			},
			scrolltoBottom() {
				this.gettjlist();
			},

			// 将数据拆分成左右两列（模拟瀑布流）
			splitDataToColumns() {
				this.leftColumnList = [];
				this.rightColumnList = [];

				this.likelist.forEach((item, index) => {
					if (index % 2 === 0) {
						this.leftColumnList.push(item);
					} else {
						this.rightColumnList.push(item);
					}
				});
			},
			closeScoreModal() {
				this.showScoreModal = false;
			},
			toOrder(){
				uni.reLaunch({
					url:'/pagesExt/order/orderlist'
				})
			},
			goHome(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			toShare(){
				let id = this.opt.orderid;
				uni.reLaunch({
					url:'/pages/pay/share_order?id=' + id
				})
			}
		}

	}
</script>

<style>
	.success-box {
		padding: 20rpx;
	}

	.success-card {
		width: 100%;
		height: 480rpx;
		background: linear-gradient(to top right,
				#DCE6F5,
				#F6DBE9);
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		padding: 20rpx 0;
	}

	.score-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		z-index: 999;
	}
	.close-img{
		width: 80rpx;
		height: 80rpx;
		margin-top: 30rpx;
	}
	.score-modal-content {
		width: 560rpx;
		height: 560rpx;
		background: linear-gradient(to top right,
				#DCE6F5,
				#F6DBE9);
		border-radius: 36rpx;
		padding: 40rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
	}

	.score-modal-close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 40rpx;
		color: #999;
	}

	.score-modal-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		
	}
	.score-img{
		width: 300rpx;
		height: 200rpx;
	}
	.score-modal-text {
		font-size: 30rpx;
		text-align: center;
		/* margin-bottom: 40rpx; */
		line-height: 1.6;
		color: #727171;
	}
	.score-num-text{
		padding: 0 10rpx;
	}
	.score-modal-btn {
		background-color: #FF4D4F;
		color: #fff;
		text-align: center;
		padding:10rpx 60rpx;
		border-radius: 36rpx;
		font-size: 32rpx;
	}

	.success-card-title {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.success-money {
		font-size: 40rpx;
		font-weight: bold;

	}

	.success-sf {
		font-size: 32rpx;
		font-weight: bold;
	}

	.success-sf-text {}

	.success-img {
		width: 180rpx;
		height: 180rpx;

	}

	.success-main {
		background-color: #fff;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 4rpx 20rpx;
		font-size: 12px;
		margin-top: 20rpx;
	}
	.success-main-text{
		color: #727171;
	}
	.success-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
		margin: 30rpx 0;
	}

	.success-btn-box {
		padding: 10rpx 70rpx;
		border-radius: 36rpx;

	}

	.dui-box {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.dui-gou {
		width: 40rpx;
		height: 40rpx;
		margin-right: 4rpx;
	}

	.waterfall-container {
		width: 100%;
		/* height: 100vh; */
		/* 可根据需要调整高度 */
		/* padding: 10rpx; */
		box-sizing: border-box;
	}

	.like {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
	}

	.like-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.waterfall-container-title {
		text-align: center;
		padding: 20rpx 0;
	}

	.waterfall-list {
		display: flex;
		justify-content: space-between;
		/* padding: 0 10rpx; */
	}

	.waterfall-column {
		width: 48%;
		/* 两列布局，留一点间距 */
	}

	.waterfall-item {
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.shop-image {
		width: 100%;
		display: block;
	}

	.shop-text {
		padding: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop-text-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.shop-text-price {
		font-size: 32rpx;
		color: #ff4d4f;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop-text-sales {
		font-size: 24rpx;
		color: #999;
	}

	.shop-add {
		width: 48rpx;
		height: 48rpx;
	}

	.loading-text,
	.no-more-text {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 26rpx;
	}
</style>